<template>
  <div class="home">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-row>
      <el-col :span="18" :offset="3">
        <div class="about">
        <h1 class="animate__animated animate__slideInDown">关于我们</h1>
        <div class="animate__animated animate__slideInDown">ABOUT US</div>
        <p class="animate__animated animate__slideInDown">WEB主题公园是专注于wordpress主题的开发团队，我们的开发宗旨是尽量利用wordpress的原声功能打造最轻量级的主题，因此我们所出品的主题功能强
        大的背后是超轻量级的性能，依据wordpress所提供的开发文档，利用wordpress原生高效的功能作为基础开发，集强大与轻量于一身。
        </p>
        <el-divider content-position="center">
          <el-link href="" target="_blank" class="animate__animated animate__slideInLeft">查看详细</el-link>
          <el-link href="" target="_blank" class="animate__animated animate__slideInRight">联系我们</el-link>
        </el-divider>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-row>
          <el-col :span="9">
            <ul class="service_left animate__animated animate__slideInRight">
              <li v-for="(item,index) in serviceList" :key="index">
                <div>
                  <h3>{{ item.title }}</h3>
                  <span>{{ item.smalltext }}</span>
                </div>
                <img :src="item.icon">
              </li>
            </ul>
          </el-col>
          <el-col :span="6" style="text-align:center">
            <img src="../assets/logo.png" alt="">
          </el-col>
          <el-col :span="9">
            <ul class="service_right animate__animated animate__slideInLeft">
              <li v-for="(item,index) in serviceList" :key="index">
                <img :src="item.icon">
                <div>
                  <h3>{{ item.title }}</h3>
                  <span>{{ item.smalltext }}</span>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="feature">
      <el-col :span="18" :offset="3">
        <el-row :gutter="20">
          <el-col :span="6" class="animate__animated animate__slideInUp" v-for="(item,index) in featureList" :key="index">
            <div class="featureItem">
              <img :src="item.url">
              <h3>{{ item.num }}</h3>
              <p class="animate__animated animate__slideInDown">{{ item.smalltext }}</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {},
  data () {
    return {
      serviceList: [
        {
          title: 'HTML5&swiper4&vss3',
          smalltext: '更好的兼容移动设备，对搜索引擎更加友好',
          icon: require('../assets/icon5.jpg')
        },
        {
          title: 'HTML5&swiper4&vss3',
          smalltext: '更好的兼容移动设备，对搜索引擎更加友好',
          icon: require('../assets/icon5.jpg')
        },
        {
          title: 'HTML5&swiper4&vss3',
          smalltext: '更好的兼容移动设备，对搜索引擎更加友好',
          icon: require('../assets/icon5.jpg')
        }
      ],
      featureList: [
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        },
        {
          num: '200+',
          smalltext: '在过去的5年中，我们一共服务了2000+的客户，以最专业的产品和优质的售后服务得到了客户的一致肯定评价',
          url: require('../assets/sofa.png')
        }
      ]

    }
  }
}
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.about{
  text-align: center;
}
.service_left li{
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  cursor: pointer;
}
.service_right li{
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
  cursor: pointer;
}
.service_left li > div,.service_left li > img,.service_right li > div,.service_right li > img{
  transition: all .5s ease-in-out;
}
.service_left li:hover > div,.service_right li:hover > div{
  transform: translateY(10px);
}
.service_left li:hover > img,.service_right li:hover > img{
  transform: translateY(-10px);
}
.feature{
  padding: 50px 0;
  background: url(../assets/wenzi.jpg) fixed center;
}
.featureItem{
  background: rgba(255,255,255,0.8);
  text-align: center;
  padding:30px;
  margin:10px 0;
}
</style>
